<template>
  <view class="container">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">五音疗疾</block>
	 
    </cu-custom>
    <!-- {{user_id}} -->
    <view class="MainBox">
      <video
        id="myVideo"
        :src="zhengnianclass.vidUrl"
        controls
        :poster="zhengnianclass.vidImg"
        @ended="onVideoEnded"
      ></video>
      
      <RatingModal
        :show="showRatingModal"
        :identity-card="identity_card"
        :video-name="zhengnianclass.title"
        @submit-rating="submitRating"
      />
      
      <view class="cssBox" style="position: relative;">
        <view class="leftBox">
          <view class="margin-bottom-sm">
            <text class="text-bold text-xl">{{zhengnianclass.title}}</text>
          </view>
          <view>
            <view class="fl margin-right text-df text-gray">
              <u-icon name="play-circle" style="margin-right: 5rpx;"></u-icon>
              <text>{{zhengnianclass.studyNum}}</text>
            </view>
            <view class="fl margin-right text-df text-gray">
              <u-icon name="order" style="margin-right: 5rpx;"></u-icon>
              <text>{{zhengnianclass.review}}</text>
            </view>
            <view class="fl margin-right text-df text-gray">
              <u-icon name="clock" style="margin-right: 6rpx;"></u-icon>
              <text>{{zhengnianclass.time}}</text>
            </view>
            <view style="clear: both;"></view>
          </view>
        </view>
        <button hover-class='none' class='rightBox' open-type="share">
          <u-icon label-color="#2979ff" label-size="26" margin-top="12" label-pos="bottom" label="分享一下" name="share" color="#2979ff" size="54"></u-icon>
        </button>
      </view>

      <view class="cssBox">
        <view class="margin-bottom-sm">
          <text class="text-bold text-lg">简介：</text>
        </view>
        <text class="text-df">{{zhengnianclass.synopsis}}</text>
      </view>
      
      <view class="cssBox">
        <view class="margin-bottom-sm flex justify-between">
          <text class="text-bold text-lg">选择训练： </text>
          <text class="text-gray text-df">当前训练：{{zhengnianclass.title}}</text>
        </view>
        <view class="courseBox flex justify-around">
          <view :class="[classid==0 ? 'active' : '']" @click="onclickclass(0)">阿尔法脑波高频音乐</view>
      <!--<view :class="[classid==1 ? 'active' : '']" @click="onclickclass(1)">第一周：生活中的正念-正念饮食</view>
          <view :class="[classid==2 ? 'active' : '']" @click="onclickclass(2)">第二周：身体扫描</view>
          <view :class="[classid==3 ? 'active' : '']" @click="onclickclass(3)">第三周：正念呼吸（3分钟呼吸空间练习）</view>
          <view :class="[classid==4 ? 'active' : '']" @click="onclickclass(4)">第四周：正念静坐</view>
          <view :class="[classid==5 ? 'active' : '']" @click="onclickclass(5)">第五周：正念行走</view>
          <view :class="[classid==6 ? 'active' : '']" @click="onclickclass(6)">第六周：减压蝴蝶拍</view>
          <view :class="[classid==7 ? 'active' : '']" @click="showPreviousWeeksModal">第七周：正念组合练习</view>
          <view :class="[classid==8 ? 'active' : '']" @click="onclickclass(8)">第八周：开启正念生活</view> -->
        </view>
      </view>
    </view>

    <!-- 弹窗 -->
    <view v-if="showModal" class="modal">
      <view class="modal-content">
        <text class="text-bold text-lg">选择前六周的训练：</text>
        <view class="modal-options">
          <view @click="onclickclass7(1)">第一周：生活中的正念-正念饮食</view>
          <view @click="onclickclass7(2)">第二周：身体扫描</view>
          <view @click="onclickclass7(3)">第三周：正念呼吸（3分钟呼吸空间练习）</view>
          <view @click="onclickclass7(4)">第四周：正念静坐</view>
          <view @click="onclickclass7(5)">第五周：正念行走</view>
          <view @click="onclickclass7(6)">第六周：减压蝴蝶拍</view>
        </view>
        <button @click="closeModal">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
import RatingModal from './RatingModal.vue';

export default {
  components: { RatingModal },
  data() {
    return {
      classid: 0,
      zhengnianclass: {},
      showRatingModal: false, // 用于控制弹窗的显示
      identity_card: '', // 假设的身份证号
	  user_id: '', 
	  userinfo:{},
      showModal: false // 用于控制弹窗的显示
    };
  },
  onLoad() {
	 
    this.zhengnianclass = {
      title: '阿尔法脑波高频音乐',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '阿尔法脑波高频音乐',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/aefnb.png',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/aefnb.MP3',
	  train_time_sum:'60'
    };
  },
  mounted() {
    this.identity_card = uni.getStorageSync("identity_card");
	this.user_id = uni.getStorageSync("user_id");
	this.userinfo = uni.getStorageSync("userinfo");
  },
  methods: {
    videoErrorCallback: function(e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false
      });
    },
    onVideoEnded1() {
      this.showRatingModal = true;
	  if (this.zhengnianclass["titleen"]=='jyjs'){
	  		  this.showRatingModal = false;
	  }
    },
    submitRating(rating) {
		
      this.showRatingModal = false;
	 
	  
      const ratingText = rating["rating"] === 1 ? '一般' : rating["rating"] === 2 ? '较好' : '非常好';
	  const suggestion1=rating["suggestion"];
      const requestData = {
        identity_card: this.identity_card,
        video_name: this.zhengnianclass.titleen,
        rating: ratingText,
		suggestion:suggestion1,
		user_id:this.user_id,
		train_time_sum:this.zhengnianclass.train_time_sum,
		username:this.userinfo["data"]["userinfo"][1],
		admission_no:this.userinfo["data"]["userinfo"][2],
		phone:this.userinfo["data"]["userinfo"][29]
      };
		console.log(requestData)
	
      uni.request({
        url: 'http://202.127.200.31:30010/user/train/rate', // 请求的 URL
        method: 'POST', // 请求方法
        data: requestData, // 发送的数据
        header: {
          'Content-Type': 'application/json' // 设置请求头为 JSON 格式
        },
        success: (res) => {
          console.log('提交成功:', res.data);
          // 使用 uni.showToast 来显示成功信息
          uni.showToast({
            title: '评价提交成功',
            icon: 'success', // 使用 success 图标
            duration: 2000 // 消息框持续时间
          });
        },
        fail: (err) => {
          console.error('提交失败:', err);
          // 使用 uni.showToast 来显示失败信息
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none', // 无图标
            duration: 2000 // 消息框持续时间
          });
        }
      });
    },
    onclickclass(id) {
      console.log(id);
      if (id == 1) {
        this.classid = 1;
        this.zhengnianclass = {
          title: '生活中的正念-正念饮食',
          titleen: 'putaogan',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '生活中的正念-正念饮食',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/putaogan.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/putaogan.mp4',
		  train_time_sum:'175'
        };
      } else if (id == 2) {
        this.classid = 2;
        this.zhengnianclass = {
          title: '身体扫描',
          titleen: 'stsm',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '身体扫描',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/stsm.png',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/stsm.m4a',
		  train_time_sum:'144'
        };
      } else if (id == 3) {
        this.classid = 3;
        this.zhengnianclass = {
          title: '正念呼吸（3分钟呼吸空间练习）',
          titleen: 'znhx',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '正念呼吸（3分钟呼吸空间练习）',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/znhx.png',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/znhx.http://xinli.g60health.com:8000/xinliimg/znhx.m4a',
		  train_time_sum:'63'
        };
      } else if (id == 4) {
        this.classid = 4;
        this.zhengnianclass = {
          title: '正念静坐',
          titleen: 'znjz',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '正念静坐',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/znjz.png',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/znjz.m4a',
		  train_time_sum:'70'
        };
      } else if (id == 5) {
        this.classid = 5;
        this.zhengnianclass = {
          title: '正念行走',
          titleen: 'znxz',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '正念行走',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/znjz.png',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/znjz.m4a',
		  train_time_sum:'94'
        };
      } else if (id == 6) {
        this.classid = 6;
        this.zhengnianclass = {
          title: '减压蝴蝶拍',
          titleen: 'hudiepai',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '蝴蝶拍',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/hudiepai.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/hudiepai.mp4',
		  train_time_sum:'79'
        };
      } else if (id == 7) {
        this.classid = 7;
        this.zhengnianclass = {
          title: '正念组合练习',
          titleen: 'znzh',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '正念组合练习',
          vidImg: '',
          vidUrl: ''
        };
      } else if (id == 8) {
        this.classid = 8;
        this.zhengnianclass = {
          title: '开启正念生活',
          titleen: 'znsh',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '开启正念生活',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/d8z.png',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/d8z.m4a',
		  train_time_sum:'1295'
        };
      } else if (id == 0) {
        this.classid = 0;
        this.zhengnianclass = {
      title: '阿尔法脑波高频音乐',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '阿尔法脑波高频音乐',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/aefnb.png',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/aefnb.MP3',
	  train_time_sum:'60'
    };
      }
    },
	onclickclass7(id) {
	  console.log(id);
	  if (id == 1) {
		   this.showModal = false;
	    this.classid = 7;
	    this.zhengnianclass = {
	      title: '生活中的正念-正念饮食',
	      titleen: 'znzh',
	      studyNum: '335',
	      review: '35',
	      time: '2024-8-8',
	      synopsis: '生活中的正念-正念饮食',
	      vidImg: 'http://xinli.g60health.com:8000/xinliimg/putaogan.jpg',
	      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/putaogan.mp4'
	    };
	  } else if (id == 2) {
		   this.showModal = false;
	    this.classid = 7;
	    this.zhengnianclass = {
	      title: '身体扫描',
	      titleen: 'znzh',
	      studyNum: '335',
	      review: '35',
	      time: '2024-8-8',
	      synopsis: '身体扫描',
	      vidImg: 'http://xinli.g60health.com:8000/xinliimg/stsm.png',
	      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/stsm.m4a'
	    };
	  } else if (id == 3) {
		   this.showModal = false;
	    this.classid = 7;
	    this.zhengnianclass = {
	      title: '正念呼吸（3分钟呼吸空间练习）',
	      titleen: 'znzh',
	      studyNum: '335',
	      review: '35',
	      time: '2024-8-8',
	      synopsis: '正念呼吸（3分钟呼吸空间练习）',
	      vidImg: 'http://xinli.g60health.com:8000/xinliimg/znhx.png',
	      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/znhx.m4a'
	    };
	  } else if (id == 4) {
		   this.showModal = false;
	    this.classid = 7;
	    this.zhengnianclass = {
	      title: '正念静坐',
	      titleen: 'znzh',
	      studyNum: '335',
	      review: '35',
	      time: '2024-8-8',
	      synopsis: '正念静坐',
	      vidImg: 'http://xinli.g60health.com:8000/xinliimg/znjz.png',
	      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/znjz.m4a'
	    };
	  } else if (id == 5) {
		   this.showModal = false;
	    this.classid = 7;
	    this.zhengnianclass = {
	      title: '正念行走',
	      titleen: 'znzh',
	      studyNum: '335',
	      review: '35',
	      time: '2024-8-8',
	      synopsis: '正念行走',
	      vidImg: 'http://xinli.g60health.com:8000/xinliimg/znxz.png',
	      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/znxz.m4a'
	    };
	  } else if (id == 6) {
		   this.showModal = false;
	    this.classid = 7;
	    this.zhengnianclass = {
	      title: '减压蝴蝶拍',
	      titleen: 'znzh',
	      studyNum: '335',
	      review: '35',
	      time: '2024-8-8',
	      synopsis: '蝴蝶拍',
	      vidImg: 'http://xinli.g60health.com:8000/xinliimg/hudiepai.jpg',
	      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/hudiepai.mp4'
	    };
	  }
	},
    showPreviousWeeksModal() {
		this.classid = 7;
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    }
  },
  // 分享小程序
  onShareAppMessage(res) {
    return {
      title: '正念减压训练'
    };
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f5f9;
}

.MainBox {
  width: 750rpx;

  video {
    width: 750rpx;
  }
}

.cssBox {
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  margin-bottom: 15rpx;
}

.rightBox {
  width: 150rpx;
  height: 100%;
  position: absolute;
  right: 20rpx;
  top: 0;
  text-align: center;
  line-height: 120rpx;
  padding: 0;
  background: none;
}

.courseBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -10px;

  view {
    width: 240rpx;
    height: 58rpx;
    border: 2rpx solid #909399;
    text-align: center;
    line-height: 58rpx;
    border-radius: 12rpx;
    margin: 10rpx 0 20rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
    font-size: 24rpx;
    color: #909399;
    padding: 0 6rpx;
  }

  .active {
    border: 2rpx solid #2979ff;
    background-color: #2979ff;
    color: #FFFFFF;
  }

  ::after {
    content: "";
    flex: auto;
  }

  > view {
    margin-left: 10px;
    margin-bottom: 10px;
    width: calc((100% - 10px*3) / 3);
  }
}

button::after {
  border: none;
  padding: 0;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  width: 80%;
  max-width: 600rpx;
}

.modal-options {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;

  view {
    padding: 10rpx;
    border: 1rpx solid #ccc;
    margin-bottom: 10rpx;
    border-radius: 5rpx;
    cursor: pointer;
  }
}
</style>